Vue.js框架的便利與屬性介紹 (DAY25)

2021 iThome 鐵人賽

DAY 25

Modern Web

網頁前端基礎&Vue.js系列第 25 篇

13th鐵人賽

Vince

2021-10-08 00:03:04

621 瀏覽

分享至

Vue框架增加和改變了一些功能，使得開發者撰寫Code時簡潔許多，錯誤率降低，在除錯時也比較有效率!下面舉了一個簡單的例子:

在Javascript中我們要改變一個動元素的內容時會使用document.getElementById(‘動元素id’).textcontent，但這樣的方法其實有時候是不太有效率的!若有很多同樣的文字內容，就必須重複寫很長的code，或是利用for迴圈，若要多個文字連動更新，就會很麻煩!
假如我有很多同樣的內容要放到各個不同的地方，就會像以下的寫法:

<body>
    <h1 id="1"></h1>
    <h2 id="2"></h2>
    <h3 id="3"></h3>
    <h3 id="4"></h3>
    <h5 id="5"></h5>
</body>
<script>
     document.getElementById("1").textContent = "This is your project2";
     document.getElementById("2").textContent = "This is your project2";
     document.getElementById("3").textContent = "This is your project2";
     document.getElementById("4").textContent = "This is your project2";
     document.getElementById("5").textContent = "This is your project2";
</script>

像這樣通常我們稱為指令式渲染，直接的操作DOM物件，必須有一個指令才會有一個動作，而我們熟悉的JS和JQuery就是利用這種方法控制網頁畫面。

上述的這種方法在處理少量的元素時是OK的，但如果我們有更多更多同樣的內容呢?這樣感覺就不是很方便，所以我們換用Vue來寫寫看會變怎樣!

<div id="hi">
        <h1>{{message}}</h1>
        <h2>{{message}}</h2>
        <h3>{{message}}</h3>
        <h3>{{message}}</h3>
        <h5>{{message}}</h5>
 </div>
<script>
        var hi = new vue({
            el: '#hi',
            data: {
                message: "This is your project2"
            }
        });
</script>

用Vue的寫法看起來簡潔很多，只要把定義好的內容包裝起來，就可以供應擁有權限的HTML區塊重複的使用，不需要對DOM重複的操作!這也就在第一篇介紹到聲明式渲染。

認識Vue實體屬性

Vue實體是什麼? 在 <script> 標籤內的程式碼
Vue有非常非常多的屬性供我們使用，例如(el、data、method、computed 之類的)，但今天這篇文章會先介紹建構一個vue最基礎也最常使用到的el & data & method 三個屬性
el(element): 將vue功能掛載至特定範圍
data:資料綁定，在特定範圍呈現文字、資料等
method:用於定義vue實體上的函數

<div id="app">
     <p> {{project3()}} </p>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    x: "this i", y: "s your project 3"
  },
  methods: {
    project3: function () {
       return  this.x + this.y;
    }
  }
})
</script>

上面這個範例將el&data&method都呈現出來，在vue實體中的el:#app屬性會綁定Html模板id為app的區塊，也就是說只有在綁定的區塊中才能接收到vue實體的資料。在data裡面的定義的x、y資料，到了methods裡面，就可以透過 this.x 以及 this.y 來存取它們，這樣我們在html模板中就能使用{{ }}來接收data和method函數中的資料了。